<template>
	<div class="mail_message_detail" v-loading="loading">
		<el-page-header @back="handleReturnPage()" content="邮件详情"></el-page-header>
		<div class="content">
			<div class="info">
				<h1>{{ detailData.subject }}</h1>
				<p>发件人：{{ detailData.sendUser }}</p>
				<p>收件人：{{ detailData.recevieUser }}</p>
				<p>时 &nbsp; 间：{{ detailData.createTime }}</p>
			</div>
			<div class="body" v-html="detailData.content"></div>
		</div>
	</div>
</template>

<script>
import { mailDetail } from '@/api/business/tbMailMessage';
export default {
	data() {
		return {
			loading: false,
			detailData: {}
		};
	},
	computed: {
		mailId() {
			return this.$route.params.id || '';
		}
	},
	watch: {
		mailId: {
			handler(id) {
				this.loading = true;
				this.getMailMessageData();
			},
			immediate: true
		}
	},
	methods: {
		//获取邮件详情
		async getMailMessageData() {
			let result = await mailDetail(this.mailId).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.detailData = this.$detailData(result.data);
			}
		},

		//返回列表
		handleReturnPage() {
			this.$router.back();
		},

		async handleDeleteMail() {
			let that = this;
			let id = this.detailData.id;
			that.$confirm('此操作将永久删除邮件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						await deleteMailMessage(id).then((res) => {
							let result = res.data;
							if (result.code === '0') {
								that.$router.back();
								that.$showCustomMessage('success', '删除邮件成功');
							}
						});
						done();
					} else {
						done();
					}
				}
			}).catch(() => {});
		}
	}
};
</script>

<style lang="scss" scoped>
.mail_message_detail::v-deep {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: 4px;
	background-color: #fff;
	.el-page-header {
		display: flex;
		align-items: center;
		padding: 10px;
		border-bottom: solid 1px #ebeef5;
	}
	.el-page-header__content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 1;
		.el-button {
			font-size: 16px;
			padding: 0;
		}
	}
	.content {
		flex: 1;
		padding: 16px;
		overflow: auto;
	}
	.info {
		padding-bottom: 10px;
		border-bottom: solid 1px #ebeef5;
		h1 {
			font-size: 16px;
			margin-bottom: 10px;
		}
		p {
			line-height: 2;
			color: #999;
		}
	}
	.body {
		color: #666;
		font-size: 16px;
		line-height: 1.75;
		padding: 16px 0 0;
	}
}
</style>
